<template>
    <div id="tenants">
        <div id="search">  
            <el-input
                    v-model="input"
                    placeholder="请输入身份证号"
                ></el-input>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="toSearch()"
                    >搜索</el-button
                >
        </div>
        <el-table :data="tenants" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="phone" label="联系方式" width="180">
            </el-table-column>
            <el-table-column prop="IDCard" label="身份证"> </el-table-column>
            <el-table-column prop="state" label="状态">
                <template slot-scope="scope">
                    <el-button
                        type="danger"
                        v-if="scope.row.state == '2'"
                        disabled
                        >已认证</el-button
                    >
                    <el-button
                        type="success"
                        v-if="scope.row.state == '1'"
                        @click="isAgreen(scope.row._id)"
                        >未认证</el-button
                    >
                </template>
            </el-table-column>
            <el-table-column prop="credits" label="信誉值"> </el-table-column>
        </el-table>
        <div id="page" style="margin-top: 100px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="dataPage.currentPage - '0'"
                :page-sizes="[1, 3, 5, 7, 11]"
                :page-size="dataPage.pageSize"
                layout="total, sizes, prev, pager, next,jumper"
                :total="dataPage.total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const {
    mapState,
    mapMutations,
    mapGetters,
    mapActions,
} = createNamespacedHelpers("adminTenants");
export default {
    mounted() {
        this.getTenants();
    },
    data() {
        return {
            options: [
                {
                    value: "all",
                    label: "全部",
                },
                {
                    value: "1",
                    label: "未审核",
                },
                {
                    value: "2",
                    label: "审核通过",
                },
                {
                    value: "3",
                    label: "审核未通过",
                },
            ],
            input: "",
        };
    },
    methods: {
        ...mapMutations(["setPageData", "setCurrentPage", "setPageSize"]),
        ...mapActions(["getTenants"]),
        handleSizeChange(val) {
            this.setPageSize(val);
            this.getTenants(this.dataPage);
        },
        handleCurrentChange(val) {
            this.setCurrentPage(val);
            this.getTenants(this.dataPage);
        },
        isAgreen(id) {
            this.dataPage.agreenState = "2";
            this.dataPage._id = id;
            this.getTenants(this.dataPage);
        },
        toSearch() {
            this.dataPage.input = this.input;
            console.log(this.dataPage);
            this.getTenants(this.dataPage);
        },
    },
    computed: {
        ...mapState(["tenants", "dataPage"]),
    },
    watch: {
        "dataPage.pageSize": {
            handler(newName, oldName) {
                this.getTenants(this.dataPage);
            },
        },
        "dataPage.currentPage": {
            handler(newName, oldName) {
                this.getTenants(this.dataPage);
            },
        },
    },
};
</script>

<style lang="scss" scope>
#tenants{
     #search{
     .el-input{
         width: 250px;
          input{
            border-right: none;
            border-radius: 0;
          }
        }
        .el-button{ 
                border-left: none;
                 border-radius: 0;
        }
     }
     .el-table{
       margin: 50px;  
     }
}
</style>